<!DOCTYPE html>
<html lang="en">
    <head>
        <title>v-bind 数据源绑定</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <style>
        .classA{color:red;}
        .classB{background:blue;font-size: 150%;}
        </style>
    </head>
    <body>
        <h1>v-bind 数据源绑定</h1>
        <hr>
        <div id="app">
           <img v-bind:src="imgsrc">
           <br>
           <a :href="urlhref"  target="_blank">百度</a>
           <hr>
           <div :class="classname1">1、绑定class</div>
           <div :class="{classA:isok}">2、绑定class中的判断</div>
           <div :class="[classname1,classname2]">3、绑定class数组</div>
           <div :class="isok?classname1:classname2">4、绑定class三元运算符</div>
           <hr>
           <div>
                <input type="checkbox" id="istrue" v-model="isok">
                <label for="istrue">5、IsOk={{isok}}</label>
           </div>
           <br>
           <div :style="{color:red,fontSize:font}">6、绑定style</div>
           <div :style="styleobj" class="hehe" @click="hee($event)">7、用对象绑定style</div>
        </div>
        <script type="text/javascript">
          var app=new Vue({
              el:'#app',
              data:{
                imgsrc:'../assets/images/yu2.jpg', 
                urlhref:'http://www.baidu.com',
                classname1:'classA',
                classname2:'classB',
                isok:false,
                red:'red',
                font:'20px',
                styleobj:{
                    color:'#FFF',
                    fontSize:'160%',
                    backgroundColor:'red'
                }
              },
              methods:{
                hee(data){
                    data.target.style='color:red';
                } 
              }
          })
        </script>
    </body>
</html>